import React from 'react';
import styles from './style';
import {ImageBackground, Image, TouchableHighlight} from 'react-native';
import * as Animatable from 'react-native-animatable';

const bgPic = require('./img/bg.png');
const camera = require('./img/camera.png');
const arrow = require('./img/arrow.png');

const Start = ({navigation}) => {
  return (
    <ImageBackground source={bgPic} style={styles.bgImage}>
      <Animatable.Image
        source={camera}
        style={styles.camera}
        animation="rotate"
      />
      <Animatable.Text style={styles.text} animation="fadeIn" delay={300}>
        打开生活，发现美好
      </Animatable.Text>
      <TouchableHighlight onPress={() => navigation.navigate('Login')}>
        <Animatable.View style={styles.arrowContainer} animation="fadeInLeft">
          <Image source={arrow} style={styles.arrow} />
        </Animatable.View>
      </TouchableHighlight>
    </ImageBackground>
  );
};

export default Start;
